<template>
  <div>
    <div class="sign-box" :loading="loading">
      <div>
        <div class="headerLeftSty">
          <div class="navSty"></div>
          <div class="textSty1">打卡信息</div>
        </div>
        <el-form label-width="150px" ref="elForm" :model="dataForm" :rules="rules">
          <el-form-item label="打卡距离" prop="clockInAllowRange">
            <el-input-number
              v-model="dataForm.clockInAllowRange"
              :precision="2"
              :step="0.1"
              :max="1000000000"
              :min="0"
            />米
          </el-form-item>
          <el-row>
            <el-form-item>
              <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"
                >保存</el-button
              >
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <!-- <div>
        <div class="headerLeftSty">
          <div class="navSty"></div>
          <div class="textSty1">项目打卡范围</div>
        </div>
        <el-table
          :data="dataList"
          border
          :loading="loading"
          style="margin: 40px 80px; width: calc(100% - 160px)"
        >
          <el-table-column type="index" label="序号" align="center" width="80" />
          <el-table-column prop="name" label="项目名称" align="center" />
          <el-table-column label="打卡范围" align="center">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.signRange"
                :precision="2"
                :step="0.1"
                :max="1000000000"
                :min="0"
              />米
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="saveSignRange(scope.row)"
                :loading="btnLoading"
                >保存</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div> -->
    </div>
  </div>
</template>
<script>
import {
  getClockInAllowRange,
  updateClockInAllowRange,
  getProjectSignRangeList,
  updateProjectSignRange,
} from "@/api/system/record";

export default {
  data() {
    return {
      dataForm: {
        clockInAllowRange: 0,
      },
      // 表单校验
      rules: {
        clockInAllowRange: [
          { required: true, message: "请输入打卡距离", trigger: "blur" },
        ],
      },
      btnLoading: false,
      loading: false,
      dataList: [], // 项目列表
      queryParams: {
        pageNum: 1, // 当前页数
        pageSize: 10, // 每页显示条数
      },
      total: 0, // 总条数
    };
  },
  created() {
    this.getSignRange();
    // this.getList();
  },
  methods: {
    // 获取打卡范围
    getSignRange() {
      this.loading = true;
      getClockInAllowRange()
        .then((res) => {
          this.dataForm.clockInAllowRange = res.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 获取项目列表
    getList() {
      getProjectSignRangeList(this.queryParams).then((res) => {
        this.dataList = res.rows;
        this.total = res.total;
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          updateClockInAllowRange(this.dataForm)
            .then((res) => {
              this.$modal.msgSuccess(res.msg);
              this.getSignRange();
            })
            .finally(() => {
              this.btnLoading = false;
            });
        }
      });
    },
    // 修改项目打卡范围
    saveSignRange(row) {
      this.btnLoading = true;
      updateProjectSignRange(row)
        .then((res) => {
          this.$modal.msgSuccess(res.msg);
        })
        .finally(() => {
          this.btnLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.sign-box {
  margin: 20px 10px;
  .headerLeftSty {
    display: flex;
    align-items: center;
    .navSty {
      height: 15px;
      width: 5px;
      background: rgb(90, 156, 248);
    }
    .textSty1 {
      margin-left: 8px;
      font-size: 14px;
      font-weight: 700;
      margin-left: 10px;
    }
  }
}
</style>
